<%-- 
    Document   : managecourses
    Created on : 19 Sep 2013, 7:43:05 PM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Manage <strong>Courses</strong></h1>   

                    <div id="example" class="k-content">
                        <input type="hidden" name="baseUrl" value="<c:url value="/manage/courses/"/>"/>
                        <input type="hidden" name="disciplineUrl" value="<c:url value="/manage/disciplines/"/>"/>
                        <div class="demo-section">
                            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new course</a>
                        </div>

                        <div class="demo-section">
                            <div id="listView"></div>
                            <div id="pager" class="k-pager-wrap"></div>
                        </div>

                        <script type="text/x-kendo-tmpl" id="template">
                            <div class="product-view k-widget">
                            <div class="edit-buttons">
                            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
                            </div>
                            <dl>
                            <dt>Course Name</dt>
                            <dd>#:course_name#</dd>
                            <dt>Course Code</dt>
                            <dd>#:course_code#</dd>
                            <dt>Discipline Code</dt>
                            <dd>#:discipline_code#</dd>
                            <dt>Course Slot</dt>
                            <dd>#:course_slot#</dd>
                            <dt>Start Time</dt>
                            <dd>#:start_time#</dd>    
                            <dt>End Time</dt>
                            <dd>#:end_time#</dd>  
                            <dt>Day of Week</dt>
                            <dd>#:weekday#</dd>  
                            <dt>Semester</dt>
                            <dd>#:semester#</dd>  
                            <dt>Course Hours</dt>
                            <dd>#:course_hours#</dd>                            
  
                            </dl>
                            </div>
                        </script>

                        <script type="text/x-kendo-tmpl" id="editTemplate">
                            <div class="product-view k-widget">
                            <div class="edit-buttons">
                            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
                            </div>
                            <dl>
                            <dt>Course Name</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:course_name" name="course_name" required="required" validationMessage="required" />
                            <span data-for="course_name" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Course Code</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:course_code" name="course_code" required="required" validationMessage="required" />
                            <span data-for="course_code" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Discipline Code</dt>
                            <dd>
                            <input name="discipline_code"  class="k-textbox" required="required" validationMessage="required" />
                            <span data-for="discipline_code" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Course Slot</dt>     
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:course_slot" name="course_slot" required="required" validationMessage="required" />
                            <span data-for="course_slot" class="k-invalid-msg"></span>
                            </dd> 
                            <dt>Start Time</dt>
                            <dd>
                            <input data-bind="value:start_time" name="start_time" required="required" validationMessage="required" />
                            <span data-for="start_time" class="k-invalid-msg"></span>
                            </dd>
                            <dt>End Time</dt>
                            <dd>
                            <input  data-bind="value:end_time"  name="end_time" required="required" validationMessage="required" />
                            <span data-for="end_time" class="k-invalid-msg"></span>
                            </dd>
                             <dt>Day of Week</dt>
                             <dd>
                                <select data-bind="value:weekday" id="weekday" name="weekday" required="required" validationMessage="required">
                                <option></option>
                                <option>Monday</option>
                                <option>Tuesday</option>
                                <option>Wednesday</option>
                                <option>Thursday</option>
                                <option>Friday</option>
                                <option>Saturday</option>
                                <option>Sunday</option>
                                </select>
                                <span data-for="weekday" class="k-invalid-msg"></span>
                              </dd>
                         <dt>Semester</dt>
                         <dd>
                         <select data-bind="value:semester" id="semester" name="semester" required="required" validationMessage="required">
                                <option></option>
                                <option>1</option>
                                <option>2</option>
                                <option>1 and 2</option>
                                </select>
                          <span data-for="semester" class="k-invalid-msg"></span>
                             </dd>
                           
                            <dt>Course Hours</dt>
                            <dd>
                            <input type="text" data-bind="value:course_hours" data-role="numerictextbox" data-type="number" name="course_hours" required="required" min="1" validationMessage="required" />
                            <span data-for="course_hours" class="k-invalid-msg"></span>
                            </dd>
                            </dl>
                            </div>
                        </script>

                        <script>
                            $(document).ready(function() {
                                var baseUrl = $("input[name='baseUrl']").val();
                                var disciplineUrl = $("input[name='disciplineUrl']").val();
                                dataSource = new kendo.data.DataSource({
                                    transport: {
                                        read: {
                                            url: baseUrl + "read",
                                            type: "POST",
                                            dataType: "json"
                                        },
                                        update: {
                                            url: baseUrl + "update",
                                            type: "POST",
                                            dataType: "json"
                                        },
                                        destroy: {
                                            url: baseUrl + "delete",
                                            type: "POST",
                                            dataType: "json"
                                        },
                                        create: {
                                            url: baseUrl + "create",
                                            type: "POST",
                                            dataType: "json"
                                        },
                                        parameterMap: function(options, operation) {
                                            if (operation !== "read" && options.models) {
                                                return {models: kendo.stringify(options.models)};
                                            }
                                        }
                                    },
                                    batch: true,
                                    pageSize: 4,
                                    schema: {
                                        model: {
                                            id: "course_id",
                                            fields: {
                                                course_id: {editable: false, nullable: true},
                                                course_name: "course_name",
                                                course_code: "course_code",
                                                course_slot: "course_slot",
                                                discipline_id: "discipline_id",
                                                discipline_code: "discipline_code",
                                                course_hours: "course_hours",
                                                start_time:"start_time",
                                                end_time:"end_time",
                                                weekday:"weekday",
                                                semester:"semester"
                                            }
                                        }
                                    }
                                });


                                $("#pager").kendoPager({
                                    dataSource: dataSource
                                });

                                var listView = $("#listView").kendoListView({
                                    dataSource: dataSource,
                                    template: kendo.template($("#template").html()),
                                    editTemplate: kendo.template($("#editTemplate").html()),
                                    remove: function(e) {
                                    if(!confirm("This course and all of its allocations will be deleted. Are you sure you want to delete?")) e.preventDefault(); 
                                    },
                                    edit: function(e) {
                                        var model = e.model;
                                        var item = $(e.item[0]);


                                        item.find('[name="weekday"]').kendoDropDownList();
                                        item.find('[name="semester"]').kendoDropDownList();
                                        function startChange() {
                                            var startTime = start.value();

                                            if (startTime) {
                                                startTime = new Date(startTime);

                                                end.max(startTime);

                                                startTime.setMinutes(startTime.getMinutes() + this.options.interval);

                                                end.min(startTime);
                                                end.value(startTime);
                                            }
                                            populateModel();
                                        }

                                        function populateModel() {
                                            model.set("start_time", item.find('[name="start_time"]').val());
                                            model.set("end_time", item.find('[name="end_time"]').val());
                                        }

                                        //init start timepicker
                                        var start = item.find('[name="start_time"]').kendoTimePicker({
                                            change: startChange,
                                            format: "H:mm tt"
                                        }).data("kendoTimePicker");

                                        //init end timepicker
                                        var end = item.find('[name="end_time"]').kendoTimePicker().data("kendoTimePicker");
                                        end.bind("change", function() {
                                            populateModel();
                                        });
                                        //define min/max range
                                        start.min("8:00 AM");
                                        start.max("6:00 PM");

                                        //define min/max range
                                        end.min("8:00 AM");
                                        end.max("7:30 AM");

                                        var name = item.find('[name="discipline_code"]');


                                        name.kendoComboBox({
                                            autobind: false,
                                            placeholder: "Discipline Code",
                                            change: function() {
                                                model.set("discipline_id", this.value());
                                                model.set("discipline_code", this.text());
                                            },
                                            dataTextField: "discipline_code",
                                            dataValueField: "discipline_id",
                                            filter: "contains",
                                            dataSource: {
                                                pageSize: 10,
                                                serverPaging: true,
                                                serverFiltering: true,
                                                serverSorting: true,
                                                transport: {
                                                    read: {
                                                        url: disciplineUrl + "read",
                                                        //using jsfiddle echo service to simulate JSON endpoint
                                                        dataType: "json",
                                                        type: "POST",
                                                    }
                                                }
                                            }
                                        });
                                    }
                                }).data("kendoListView");

                                $(".k-add-button").click(function(e) {
                                    listView.add();
                                    e.preventDefault();
                                });
                            

//                    }

                            });
                        </script>

                        <style scoped>

                            .demo-section {
                                width: 800px;
                            }
                            #pager{
                                min-width: 796px;
                            }
                            .product-view
                            {
                                float: left;
                                position: relative;
                                width: 399px;
                                margin: -1px -1px 0 0;
                            }
                            .product-view dl
                            {
                                margin: 10px 0;
                                padding: 0;
                                min-width: 0;
                            }
                            .product-view dt, dd
                            {
                                float: left;
                                margin: 0;
                                padding: 3px;
                                height: 26px;
                                width: 180px;
                                line-height: 26px;
                                overflow: hidden;
                            }
                            .product-view dt
                            {
                                clear: left;
                                padding: 3px 5px 3px 0;
                                text-align: right;
                                opacity: 0.6;
                                width: 100px;
                            }
                            .k-listview
                            {
                                border: 0;
                                padding: 0;
                                min-width: 800px;
                                min-height: 170px;
                            }
                            .k-listview:after, .product-view dl:after
                            {
                                content: ".";
                                display: block;
                                height: 0;
                                clear: both;
                                visibility: hidden;
                            }
                            .edit-buttons
                            {
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 26px;
                                height: 306px;
                                padding: 2px 2px 0 3px;
                                background-color: rgba(0,0,0,0.1);
                            }
                            .edit-buttons .k-button
                            {
                                width: 26px;
                                margin-bottom: 1px;
                            }
                            .k-pager-wrap
                            {
                                border-top: 0;
                            }
                            span.k-invalid-msg
                            {
                                position: absolute;
                                margin-left: 6px;
                            }
                        </style>




                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
